<template>
  <div class="customer-operate-friend">
    <NormalForm pageTitle="好友备注设置" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <!-- 表格 -->
    <div class="g-card" style="padding: 20px;">
      <el-table v-loading="loading" :data="tableList" style="width: 100%" height="415">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column label="好友昵称" align="center" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="微信号" align="center" prop="wechatNo" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="好友备注" align="center" prop="remark" show-overflow-tooltip width="160px" />
        <el-table-column label="好友状态" align="center" prop="delFlag" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <div v-if="row.delFlag">
              <el-tag :type="['success', 'danger'][row.delFlag]">{{['已添加', '已删除'][row.delFlag]}}</el-tag>
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column label="关联群聊" align="center" prop="commonGroup" width="160px">
        </el-table-column>
        <el-table-column label="加好友时间" align="center" prop="firstAddTime">
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="160" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button type="text" :disabled="row.delFlag === '1'" @click="modifyRemark(row)">
              修改备注
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <!-- 修改备注弹窗 -->
    <el-dialog title="修改备注" :visible.sync="modifyVisible" width="420px">
      <el-form :model="modifyForm" :rules="rules" ref="modifyForm">
        <el-form-item label="备注" prop="remark" label-width="60px">
          <el-input v-model="modifyForm.remark" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelModify">取 消</el-button>
        <el-button type="primary" @click="saveModify" :loading="saveLoading">确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { modifyRemark, queryTaskList } from '@/api/communityOperating/friendNotes'

export default {
  name: 'friendNotes',
  data() {
    const nameValidate = (rule, value, callback) => {
      if (value) {
        if (value.length > 32) {
          callback(new Error('您录入字数超过32字'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入好友备注'))
      }
    }
    return {
      queryForm: {
        friendName: '',
        friendNote: '',
        wxNumber: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '好友昵称',
          value: '',
          prop: 'friendName',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '微信号',
          value: '',
          prop: 'wxNumber',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '好友状态',
          value: null,
          prop: 'friendNote',
          type: 'SELECT',
          emunName: 'statusOption',
        },
      ],
      enumOpt: {
        statusOption: [
          { dictLabel: '已添加', dictValue: '0' },
          { dictLabel: '已删除', dictValue: '1' },
        ],
      },
      total: 0,
      loading: false,
      tableList: [],
      modifyForm: {
        remark: '',
      },
      saveLoading: false,
      modifyVisible: false,
      rules: {
        // remark: [
        //   { required: true, validator: nameValidate, trigger: 'change' },
        // ],
      },
      rowContent: null,
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    // 远程搜索任务名称 + 搜索
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.queryTaskListFn();
    },
    queryTaskListFn() {
      let params = {
        name: this.queryForm.friendName,
        externalUserid: this.queryForm.wxNumber,
        delFlag: this.queryForm.friendNote,
        pageNum: 1,
        pageSize: this.queryForm.pageSize,
      }
      queryTaskList(params).then((res) => {
        if (res.code === 200) {
          this.tableList = res.rows || []
          this.total = res.total || 0
        }
      })
    },
    // 重置
    handleReset() {
      this.queryForm = {
        friendName: '',
        friendNote: '',
        wxNumber: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.queryTaskListFn()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.queryTaskListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.queryTaskListFn()
    },
    // 修改备注
    modifyRemark(row) {
      this.rowContent = row
      this.modifyVisible = true
      this.modifyForm.remark = ''
      this.$nextTick(() => {
        this.$refs.modifyForm.clearValidate()
      })
    },
    saveModify() {
      this.$refs.modifyForm.validate((valid) => {
        if (valid) {
          const params = {
            externalUserid: this.rowContent.externalUserid || '',
            firstUserId: this.rowContent.firstUserId || '',
            remark: this.modifyForm.remark || '',
            friendId: this.rowContent.friendId || '',
          }
          modifyRemark(params)
            .then((res) => {
              console.log(res, '--------------修改备注res')
              this.saveLoading = false
              if (res.code === 200) {
                this.$message.success(res.data)
                this.handleQuery()
              } else {
                this.$message.error(res.msg)
              }
              this.modifyVisible = false
            })
            .catch((err) => {
              this.saveLoading = false
            })
        } else {
          return false
        }
      })
    },

    cancelModify() {
      this.modifyVisible = false
      this.$refs.modifyForm.resetFields()
    },
  },
}
</script>


<style lang="scss" scoped>
.customer-operate-friend{
  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #06c160 !important;
    color: #06c160 !important;
  }
}
@import '../../../styles/base.scss';
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}
</style>
